<template>
  <div class="components-tbas-box">
    <van-tabs :active="activeIndex" @change="switchTabs">
      <van-tab :title="item" v-for="(item,index) of tabs" :key="index" @click="switchTabs"></van-tab>
    </van-tabs>
  </div>
</template>

<script>

export default {
  data() {
    return {
      tabs: ['未推荐', '已推荐'],
      activeIndex: 0
    }
  },
  props: {
  },
  onLoad() {
    // 初始化data
    Object.assign(this.$data, this.$options.data())
  },
  mounted() {

  },
  onShow() {

  },
  methods: {
    switchTabs(e) {
      this.activeIndex = e.mp.detail.index
      this.$emit('switchTabs', this.activeIndex)
    },
    refSwitchTabs(index) {
      this.activeIndex = index
    }
  }
}
</script>

<style lang="less" scoped>
.components-tbas-box {
  .van-tabs__line {
    width: 68rpx !important;
    height: 6rpx !important;
    background: #ffe100 !important;
    left: 30rpx !important;
  }
  /deep/ .van-tabs--line .van-tabs__wrap{
    height: 44px!important;
  }
  /deep/ .van-tabs__nav{
    height: 44px!important;
  }
}
</style>